<template>
    <div class="body">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
            </div>
            <form class="panel-body form-inline">
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入书名"
                        v-model.trim="bookname"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入作者"
                        v-model.trim="author"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入出版社"
                        v-model.trim="publisher"
                    />
                </div>

                <button class="btn btn-primary" @click.prevent="addFn">添加</button>
            </form>
        </div>

        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.bookname }}</td>
                    <td>{{ item.author }}</td>
                    <td>{{ item.publisher }}</td>
                    <td>
                        <a href="javascript:;" class="del" @click="delFn(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
// todo axios 实现图书管理案例
//  安装 bootstrap  需要安装3的版本  yarn add bootstrap@3
//  导入 bootstrap的css文件美化样式
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

// 配置 axios 请求根路径
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

// 接口地址： https://www.showdoc.com.cn/1834761734600444/8449559255355128

export default {
    data() {
        return {
            list: [],
            bookname: '', //书名
            author: '',   //作者名
            publisher: '' //出版社
        }
    },

    // todo   初始化钩子函数 这里可以最快得到发送 axios 请求的数据
    created () {
         this.getList()
    },

    methods: {
       async getList(){
           const {data: res} = await axios({url:'/api/books'})
           //  console.log(res);
            this.list = res.data   //将 获得的后台数据存储到 list 中
        },

       // todo === 删除功能
       async delFn(id){
           const {data:res} = await axios({
                method: 'DELETE',
                url: `/api/books/${id}`
            })
            // console.log(res);

            // 删除成功重新渲染页面
             this.getList()
        },

        // todo ==== 新增功能   
        async addFn(){
            // 判断输入内容是否为空
            if (this.bookname.length <= 0 || this.author.length <= 0 || this.publisher.length <= 0) {
                 return alert('请输入内容')
            }

           const {data: res} = await axios({
                    method: 'POST',
                    url: '/api/books',
                    data: {
                        bookname: this.bookname,
                        author: this.author,
                        publisher: this.publisher
                    }
             })
            //  console.log(res);

         //  添加成功重新渲染页面
             this.getList()

         //  todo 清空输入内容
            this.bookname = ''
            this.author = ''
            this.publisher = ''
        }
    }
}
</script>

<style scoped>
.body {
    padding: 15px;
}
</style>
